<template>
	<div class="container">
		<div class="overflow-auto" :style="{ height: container_height + 'px' }" :class="isSafari ? '-safari-page-container' : 'page-container'" ref="container">
			<router-view :key="routerKey" />
		</div>
		<div class="container layout-footer row">
			<div class="col">
				<div @click="btn_active('home')">
					<a v-bind:style="{color: layout_footer_btn_style.home}">
						<b-icon-house-fill class="icon" />
						<p>首 页</p>
					</a>
				</div>
			</div>
			<div class="col">
				<div @click="btn_active('shop')">
					<a v-bind:style="{color: layout_footer_btn_style.shop}">
						<b-icon-inboxes-fill class="icon" />
						<p>全 部</p>
					</a>
				</div>
			</div>
			<div class="col">
				<div @click="btn_active('cart')">
					<a v-bind:style="{color: layout_footer_btn_style.cart}">
						<b-icon-cart-fill class="icon" />
						<p>购物车</p>
					</a>
				</div>
			</div>
			<div class="col">
				<div @click="btn_active('me')">
					<a v-bind:style="{color: layout_footer_btn_style.me}">
						<b-icon-person-fill class="icon" />
						<p>我 的</p>
					</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { BIcon, BIconHouseFill, BIconInboxesFill, BIconCartFill, BIconPersonFill } from 'bootstrap-vue'
	
	const footer_btn_active = 'rgb(255, 153, 102)', footer_btn_inactive = 'rgb(181, 191, 198)'
	
	
	export default {
		name: 'Layout',
		inject: [
			'access_token',
		],
		components: {
			BIcon,
			BIconHouseFill,
			BIconInboxesFill,
			BIconCartFill,
			BIconPersonFill
		},
		data() {
			return {
				routerKey: 0,
				layout_footer_btn_style: {
					home: footer_btn_active,
					shop: footer_btn_inactive,
					cart: footer_btn_inactive,
					me: footer_btn_inactive
				},
				isSafari: /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
				container_height: document.body.clientHeight - 60
			}
		},
		mounted() {
			this.$router.afterEach((to, from) => {
				for(let item in this.layout_footer_btn_style){
					let name = to.name,
						i = name.indexOf('-')
					name = name.substr(0, i != -1 ? i : name.length)
					
					this.layout_footer_btn_style[item] = (name == item ? footer_btn_active : footer_btn_inactive)
				}
			});
		},
		methods: {
			btn_active(name) {
				if(name != this.$route.name) this.$router.push({name: name})
			},
			reload_view() {
				this.routerKey = new Date().getTime()
			}
		}
	}
</script>

<style>
	.container {
		padding: 0;
		margin: 0 auto;
	}
	.page-container {
		margin-bottom: 60px;
		/* height: calc(100vh - 60px); */
		background-color: rgb(245, 245, 245)
	}
	.-safari-page-container {
		margin-bottom: 60px;
		/* height: calc(100vh - 60px - 75px); */
		background-color: rgb(245, 245, 245)
	}
	.layout-footer {
		position: fixed;
		z-index: 100;
		bottom: 0;
		overflow: hidden;
		height: 3.75rem;
		width: 100%;
		background-color: rgb(250, 250, 250);
		border-top: 0.0625rem solid rgb(231, 231, 231);
	}
	.row {
		margin: 0;
	}
	.layout-footer .col {
		padding: 0 0;
		text-align: center;
	}
	.layout-footer a {
		display: block;
		margin-top: 0.625rem;
		width: 100%;
		height: 100%;
		text-decoration: none;
		pointer-events: none;
	}
	.layout-footer a p {
		font-size: 0.8125rem;
		margin: 0;
	}
	.layout-footer a .icon {
		font-size: 20px;
	}
	
	.login-btn {
		width: 100%;
	}
</style>
